@use "../_variables" as *;

[data-radix-popper-content-wrapper]:has(.dropdown-container-wrapper) {
  display: flex;
  overflow: hidden;
  z-index: $z-modal!important;
  box-shadow: 0 3px 7px var(--sd);
}

.dropdown-container-wrapper {
  @include list-style;
  overflow: hidden;
  transition: max-height $transition-fast ease;
  max-height: min( 480px, calc( var(--radix-dropdown-menu-content-available-height) - 24px ));
  display: flex;
  padding: 0;
  transition: height $transition-fast ease, width $transition-fast ease;

  &.fill {
    width: var(--radix-popper-anchor-width);
    max-width: unset;
  }

  [role="menuitem"][data-highlighted]:hover .item {
    background-color: transparent;
  }

  .dropdown-container-content-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
    min-width: var(--fix-width, 250px);
    max-width: var(--fix-width, 300px);
    min-height: 0;
    max-height: min( var(--fix-height), var(--max-height, calc( var(--radix-dropdown-menu-content-available-height) - 24px )));
    padding: 8px 0;
    background-color: var(--bg-gray-weak);
    transition: transform $transition-fast ease;
    width: max-content;

    &.new {
      position: absolute;
      left: 0;
      z-index: 2;
      max-height: inherit;

      &.prev {
        transform: translateX(-100%);

        &.transing {
          transform: translateX(0);
        }
      }

      &.next {
        transform: translateX(100%);

        &.transing{
          transform: translateX(0);
        }
      }
    }

    .item {
      &.back {
        gap: 8px;
        border-bottom: 1px solid var(--stroke-gray-medium);

        svg{
          flex: 0 0 auto;
        }
      }

      &.search {
        gap: 8px;
        cursor: auto;

        &:hover {
          background-color: var(--bg-gray-weak);
        }

        .dropdown-container-back-button {
          padding: 0;
        }

        .dropdown-search-input {
          .input-container-content-wrapper {
            height: 22px;
            padding: 0;
            border: none;
            color: var(--text-weak);

            .input-container-left {
              gap: 8px;
            }

            .input-container-icon {
              svg, img {
                width: 18px;
                height: 18px;
              }
            }
          }
        }
      }

      &.no-hover {
        &:hover {
          background-color: var(--bg-gray-weak);
        }
      }

      &.no-result,
      &:has(.no-result) {
        display: flex;
        justify-content: center;
        color: var(--text-weak);
        cursor: auto;

        &:hover {
          background-color: var(--bg-gray-weak);
        }
      }

      .dropdown-container-back-text {
        width: 100%;
        @include line-clamp(1);
      }
    }
  }

  .dropdown-container-scroll-wrapper {
    @include list-style;
    @include scrollbar;
    max-width: inherit;
    height: 100%;
    overflow-x: hidden;
    box-shadow: none;
    border-radius: 0;
    padding: 0;

    .item-wrapper {
      &.disabled {
        .item {
          color: var(--text-weak);
          cursor: not-allowed;

          &:hover {
            background-color: transparent;
          }
        }
      }
    }

    .item {
      &.has-sub {
        gap: 4px;
        justify-content: space-between;

        .left-slot {
          @include line-clamp(1);
          width: 100%;
        }

        svg {
          flex: 0 0 auto;
        }
      }
    }
  }

  &:has(.transing) {
    .dropdown-container-content-wrapper {
      pointer-events: none;
    }
  }
}
